<template>
  <div class="wrap">
    <div class="category">
      <ul class="list">
        <li class="item" :class="{active: activeCate == index}" v-for="(type, index) in goodsList" :key="index" @click="selectList" :data-index="index">
          <div class="title">
            <i class="icon"></i>
            <span class="name">{{type.name}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="goods" @scroll="sliderList" ref="goods">
      <ul class="cate-list">
        <li class="cate-item" v-for="(list, index) in goodsList" :key="index" ref="cateItems">
          <div class="title">
            <span class="name">{{list.name}}</span>
            <span class="desc">{{list.desc}}</span>
          </div>
          <ul class="goods-list">
            <li class="goods-item" v-for="(item, index) in list.goods" :key="index">
              <div class="logo">
                <img :src="item.picture" alt="">
              </div>
              <div class="content">
                <div class="name">{{item.name}}</div>
                <div class="desc">{{item.desc}}</div>
                <div class="sale">
                  <span class="sale-count">月售1090份</span>
                  <span class="rating">好评率99%</span>
                </div>
                <div class="tags">
                  <i class="recommend">老板推荐</i>
                </div>
                <div class="control">
                  <span class="price">&yen;{{item.price}}</span>
                  <span class="shopping">
                    <i class="icon-take icon-jian" v-if = "item.count > 0"></i>
                    <span class="count" v-if="item.count > 0">{{item.count}}</span>
                    <i class="icon-take icon-jia"></i>
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  name: 'goodList',
  data () {
    return {
      goodsList: [],
      activeCate: 0, // 激活的分类
      cateItemsHeight: [0] // 商品列表每一个分类列表的高度
    }
  },
  computed: {
    ...mapGetters([
      'seller'
    ])
  },
  created () {
    this.$http.get('static/json/goods.json').then(response => {
      for (var i = 0; i < response.data.length; i++) {
        if (this.seller.id === response.data[i].sellerId) {
          this.goodsList = response.data[i].types
          break
        }
      }
    })
  },
  updated () {
    // 在goodsList被初始化之后，将每组列表项的高度与之前的高度相加，再存储在高度数组中
    this.$refs.cateItems.forEach(item => {
      // console.log(item)
      let lastHeight = this.cateItemsHeight[this.cateItemsHeight.length - 1]
      this.cateItemsHeight.push(item.offsetHeight + lastHeight)
    })
  },
  methods: {
    selectList (event) {
      let i = event.currentTarget.dataset.index
      this.$refs.goods.scrollTop = this.cateItemsHeight[i]
    },
    sliderList (event) {
      // 随着右侧菜单的滑动，从后向前比较，如果top大于等于某个分组，说明该组已经滑动到顶部，则将左侧菜单对应的项目设置样式
      let scrollTop = event.target.scrollTop
      for (let i = this.cateItemsHeight.length - 1; i >= 0; i--) {
        if (scrollTop >= this.cateItemsHeight[i]) {
          this.activeCate = i
          break
        }
      }
    }
  }

}
</script>
<style lang="less" scoped>
.wrap {
  flex: auto;
  display: flex;
  height:400px;
  .category {
    flex: none;
    width: 1.7391rem;
    overflow: auto;
    .list {
      background: #f8f8f8;
      .item {
        padding: 0 0.2415rem;
        font-size: 0.2818rem;
        letter-spacing: 3px;
        line-height: 1.5;
        .title {
          padding: 0.4rem 0;
          color: #686868;
          border-bottom: 1px solid #e8e8e8;
        }
        &.active {
          font-weight: 700;
          background: #fff;
        }
        &:last-child > .title {
          border: none;
        }
      }
    }
  }
  .goods {
    padding-top: 0.161rem;
    margin-left: 0.2576rem;
    flex: auto;
    overflow-y: auto;
    .cate-list {
      .cate-item {
        .title {
          display: flex;
          padding: 0.2013rem 0;
          font-size: 0;
          overflow: hidden;
          white-space: nowrap;
          border-bottom: 1px solid #eee;
          .name {
            flex: none;
            margin-right: 0.1208rem;
            font-size: 0.2818rem;
            font-weight: 700;
            color: #666;
            vertical-align: bottom;
          }
          .desc {
            flex: auto;
            color: #999;
            font-size: 0.2818rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: bottom;
          }
        }
        .goods-list {
          .goods-item {
            display: flex;
            padding: 0.3623rem 0.2415rem 0.3623rem 0;
            border-bottom: 1px solid #f7f7f7;
            .logo {
              flex: none;
              img {
                width: 1.8116rem;
                height: 1.8116rem;
                border-radius: 0.0805rem;
              }
            }
            .content {
              flex: auto;
              margin-left: 0.2415rem;
              overflow: hidden;
              .name {
                font-size: 0.3382rem;
                font-weight: 700;
                color: #333;
              }
              .desc {
                padding-top: 0.161rem;
                color: #999;
                width: 100%;
                font-size: 0.2415rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .sale {
                padding-top: 0.161rem;
                font-size: 0;
                color: #666;
                .sale-count {
                  margin-right: 0.2013rem;
                  font-size: 0.2415rem;
                }
                .rating {
                  font-size: 0.2415rem;
                }
              }
              .tags {
                padding-top: 0.161rem;
                .recommend {
                  padding: 0.0805rem;
                  color: #ff5339;
                  font-style: normal;
                  font-size: 0.2415rem;
                  border: 1px solid #ff5339;
                }
              }
              .control {
                margin-top: 0.161rem;
                line-height: 0.5636rem;
                .price {
                  color: #ff5339;
                  font-size: 0.3382rem;
                  font-weight: bolder;
                }
                .shopping {
                  float: right;
                  font-size: 0;
                  .count {
                    display: inline-block;
                    padding: 0 0.161rem;
                    font-size: 0.3623rem;
                    vertical-align: middle;
                  }
                  .icon-take {
                    display: inline-block;
                    color: #2395ff;
                    font-size: 0.5636rem;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
